<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>阶梯线图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

/* 
阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。
在 ECharts 中，系列的 step 属性用来表征阶梯线图的连接类型，它共有三种取值：'start'、'middle' 和 'end'，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。
*/

// 指定图表的配置项和数据
var option = {
	tooltip: {},
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
			name: 'Step Start',
			type: 'line',
			step: 'start',
			data: [120, 132, 101, 134, 90, 230, 210]
		},
		{
			name: 'Step Middle',
			type: 'line',
			step: 'middle',
			data: [220, 282, 201, 234, 290, 430, 410]
		},
		{
			name: 'Step End',
			type: 'line',
			step: 'end',
			data: [450, 432, 401, 454, 590, 530, 510]
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
